import React, { useEffect, useState } from 'react'
import Taro, { useDidShow, useReachBottom } from '@tarojs/taro'
import {View,Image,Text} from '@tarojs/components'
import currentEnv from '../../../configure/currentEnv'
import './index.scss'

let filters = {
  page:1,
  pageSize: 20
}
export default function SelectCinema() {
  const {router} = Taro.getCurrentInstance()
  const [cityInfo,setCityInfo] = useState({})
  const [list,setList] = useState([])
  useDidShow(()=>{
    setList([])
    _initData()
    if(!Taro.getStorageSync('merchantId')){
      Taro.hideHomeButton()
    }
  })
  const _initData = e=>{
    const loca = Taro.getStorageSync('cityInfo')
    if(loca && loca.name){
      setCityInfo(loca || {})
      _getCityList({page:1},e=>{
        setList(e.list)
      })
    }else{
      Taro.navigateTo({
        url:'/mainPages/select-city/index'
      })
    }
  }
  const _getCityList = (e,fun)=>{
    const data = {
      cityCode:Taro.getStorageSync('cityInfo')?.cityCode || Taro.getStorageSync('cityInfo')?.code,
      page:filters.page,
      pageSize: filters.pageSize,
      ...e
    }
    if(Taro.getStorageSync('position')?.longitude){
      Object.assign(data,{
        longitude:Taro.getStorageSync('position')?.longitude,
        latitude:Taro.getStorageSync('position')?.latitude,
      })
    }
    Taro.$get('/cinema-app/api/v1/cinema/byCityAndNameV2',data).then(res=>{
      if(res.code == '1'){
        fun(res.content)
        filters = {...filters,...res.content?.pagination}
      }
    })
  }
  useReachBottom(()=>{
    if(filters.totalCount > list.length){
      _getCityList({page:filters.page+1},(data)=>{
        setList([...list,...data?.list])
      })
    }
  })
  return (
    <View className='select-cinema'>
      <View className="cinema-header" onClick={()=>{
        Taro.navigateTo({
          url:'/mainPages/select-city/index'
        })
      }}>
        当前城市: {cityInfo?.name} <View className="at-icon at-icon-chevron-right"></View>
      </View>
      {Taro.getStorageSync('merchantId')?
      <View className="cinema-list">
        <View className="list-title">当前影院</View>
        <View className="list-item">
          <View className="item-title">{Taro.getStorageSync('selectMerchant').cinemaNickName}</View>
          <View className="item-info">
            <View className="info-p">{Taro.getStorageSync('selectMerchant').address}</View>
            <View>{Taro.getStorageSync('selectMerchant').distance}</View>
          </View>
        </View>
      </View>:null}

      <View className="cinema-list">
        <View className="list-title">选择影院</View>
        <View className="list-main">
          {list?.length?list.map(res=>{
            return <View className="list-item" key={res.id} onClick={()=>{
              if(router.params.type == "bidding"){
                Taro.setStorageSync('biddingCardMerchant',res)
                Taro.navigateBack()
                return;
              }
              Taro.setStorageSync('merchantId',res.id)
              Taro.setStorageSync('selectMerchant',res)
              Taro.eventCenter.trigger('updateMerchant')
              Taro.navigateBack().catch(()=>{
                Taro.reLaunch({
                  url:currentEnv.project=='yingjing'?'/pages/index/index':'/pages/movie/index'
                })
              })
            }}>
              <View className="item-title">{res.cinemaNickName}</View>
              <View className="item-info">
                <View className="info-p">{res.address}</View>
                <View>{res.distance}</View>
              </View>
            </View>
          }):<View className='var-empty'>
            暂无数据</View>}
        </View>
      </View>
    </View>
  )
}
